<template>
    <div class="middle-main">
      <div v-if="UncheckList.length>0" class="UncheckList-body">
          <div class="UncheckList-main" :class="{has_bottom:chooseDelete}">
              <div class="prove-main" v-for="(item, index) in UncheckList" :key="index" :class="{laItem: index == UncheckList.length-1}">
                  <div class="left" :class="{left_purple_unchecked:index%3 == 0,
                                      left_yellow_unchecked:index%3 == 1,
                                      left_pink_unchecked:index%3 == 2,
                                      }">
                  </div>
                  <div class="right">
                      <div class="chooseIcon_warp" :class="{unchooseIcon_warp:!chooseDelete}"
                          >
                          <img class="icon" @click="choosedeleteitem(item, index)" :src="selectList[index] === true?choosedIcon:unchoosedIcon">
                      </div>
                      <div class="text_warp" :class="{text_warp_ChooseSubmit:!chooseDelete}">
                          <p class="content">
                          <span class="text">{{item.otherActName}}</span>
                          <img class="icon" @click="seeProvePicture(item)" src="../../../assets/img/icon/enter.svg">
                          </p>
                          <p class="tip">{{item.additionalBasis}}</p>
                      </div>
                  </div>
              </div>
          </div>
          <div class="bottom" v-if="chooseDelete">
              <div class="all">
                  <div class="chooseIcon_warp">
                          <img class="icon" @click="chooseAllDeleteitem" :src="allSelected === true?choosedIcon:unchoosedIcon">
                  </div>
                  <span class="word">全选</span>
              </div>
              <div @click="delectmethod" class="button">删除<template v-if="choosedListId.length>0">({{choosedListId.length}})</template></div>
          </div>
          <delectComponent v-if="isDelecting" :imgsrc='delectpicture' imgwidth='136' imgheight='150' title='是否确认删除？' content='' @closetip_ensure="closeEnsureAndDoFunction($event)"
                 @closetip_cancel="closeEnsure($event)"></delectComponent>
          <div v-if="showProvePicuture" class="proveimg">
            <div class="second-prove-main">
              <div class="exit" @click="exitimg">
                <img :src="exitpicture">
              </div>
              <div @click="clickPicture"
              :class="showBigPicture === true? 'itemimg_big':'itemimg'" >
                <img :src="showitem.otherActImageUrl">
              </div>
              <div :class="{remark: showitem.appealRemark&&showitem.appealRemark.length>0}" >
                {{showitem.appealRemark}}
              </div>
            </div>
          </div>
      </div>
      <div v-else class="empty">
          <img :src="emptypicture">
          <span>没有未审核证明哦~</span>
      </div>
    </div>
</template>

<script>
import choosedIcon from '../../../assets/img/icon/uploader_file_rb_s.svg'
import unchoosedIcon from '../../../assets/img/icon/uploader_file_rb_n.svg'
import emptypicture from '../../../assets/img/pluto-sign-up.png'
import delectComponent from '../../../components/public/tip_yesorno'
import delectpicture from '../../../assets/img/virtual-reality.svg'
import exitpicture from '../../../assets/img/icon/homepage_btn_close@2x.png'
import config from '../../../../vue.config'
export default {
  props: ['chooseDelete'],
  components: {
    delectComponent
  },
  data () {
    return {
      exitpicture,
      showitem: null,
      showProvePicuture: false,
      showBigPicture: false,
      delectpicture,
      emptypicture,
      selectList: [], // 存每个活动的选择状态，只能这样避免双击才能激活按钮取反
      UncheckList: [], // 未审核活动列表
      choosedListId: [], // 选择的待删除活动列表
      choosedIcon,
      unchoosedIcon,
      allSelected: false,
      isDelecting: false, // 激活删除按钮
      baseUrl: config.devServer.proxy['/student'].target + '/studentevaluation/api/otheract/'
    }
  },
  watch: {
    // eslint-disable-next-line vue/return-in-computed-property
    UncheckList () {
      this.sendNshNumber()
    }
  },
  methods: {
    clickPicture () {
      this.showBigPicture = !this.showBigPicture
      // console.log(this.showBigPicture)
    },
    async getUnCheckedOtherActivities () {
      let student = this.$store.state.Student
      let result = await this.$axios({
        url: '/studentevaluation/api/otheract/getUnCheckedOtherActivities/' + student.studentid,
        method: 'get'
      })
      result = result.data
      if (result.data != null) {
        this.UncheckList = result.data
      }
      this.setselectList()
      // console.log(this.UncheckList)
    },
    setselectList () {
      this.selectList = []
      this.choosedListId = []
      for (var i = 0; i < this.UncheckList.length; i++) {
        this.selectList.push(false)
      }
      // console.log(this.selectList)
    },
    choosedeleteitem (item, index) {
      // console.log(this.selectList[index])
      this.selectList[index] = !this.selectList[index]
      // console.log(this.selectList[index])
      if (this.selectList[index] === true) {
        this.choosedListId.push(item.id)
      } else {
        this.allSelected = false
        var iindex = -1
        for (var i = 0; i < this.choosedListId.length; i++) {
          if (item.id === this.choosedListId[i]) {
            iindex = i
          }
        }
        if (iindex > -1) {
          this.choosedListId.splice(iindex, 1)
        }
      }
    },
    chooseAllDeleteitem () {
      this.allSelected = !this.allSelected
      this.choosedListId.splice(0, this.choosedListId.length)
      for (var i = 0; i < this.UncheckList.length; i++) {
        this.selectList[i] = this.allSelected
        if (this.allSelected === true) {
          this.choosedListId.push(this.UncheckList[i].id)
        }
      }
    },
    sendNshNumber () {
      this.$emit('getNshNumebr', this.UncheckList.length)
    },
    // 下面是删除弹窗的函数
    delectmethod () {
      if (this.choosedListId.length < 1) {
        alert('请选择待删除项目！')
        return
      }
      this.$store.commit('changeCoverState', true)
      this.isDelecting = true
    },
    async closeEnsureAndDoFunction () {
      // console.log(this.choosedListId)
      // console.log(this.selectList)
      let result = await this.$axios({
        url: '/studentevaluation/api/otheract/deleteActivities',
        method: 'delete',
        params: {
          otherActivityIds: this.choosedListId
        }
      })
      result = result.data
      if (result.data === 1) {
        alert('删除成功！')
      } else {
        alert('删除失败！')
      }
      await this.getUnCheckedOtherActivities()
      this.$store.commit('changeCoverState', false)
      this.isDelecting = false
    },
    closeEnsure () {
      this.$store.commit('changeCoverState', false)
      this.isDelecting = false
    },
    // 下面是关于展示图片的函数
    seeProvePicture (item) {
      this.$store.commit('changeCoverState', true)
      this.showProvePicuture = true
      this.showitem = item
    },
    exitimg () {
      this.showProvePicuture = false
      this.$store.commit('changeCoverState', false)
    }
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  mounted () {
    this.getUnCheckedOtherActivities()
    this.sendNshNumber()
  }
}

</script>

<style lang="scss" scoped>
    .second-prove-main {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    .UncheckList-body {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .proveimg {
        position: absolute;
        width: px2rem(280);
        height: px2rem(258);
        background-color: #fff;
        z-index: 200;
        top: 50%;
        left:50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        border-radius: px2rem(31);
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        .exit {
          position: absolute;
          width: px2rem(30);
          height: px2rem(30);
          right: px2rem(12);
          top: px2rem(12);
          img {
            height: 100%;
            width: 100%;
          }
        }
        .itemimg {
          width: px2rem(156);
          height: px2rem(156);
          margin: px2rem(26) 0 px2rem(10) 0;
          overflow: hidden;
          // background-color: red;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .itemimg_big {
          position: fixed !important;
          z-index: 300;
          left: 0 ;
          top: 0 ;
          right: 0 ;
          bottom: 0 ;
          // background-color: blue;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .remark {
          height: px2rem(40);
          width: px2rem(252);
          font-family: PingFang SC;
          line-height: px2rem(20);
          overflow: auto;
          margin-bottom: px2rem(18);
          font-weight: 400;
          font-size: px2rem(14);
        }
      }
    }
    .middle-main {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        font-family: PingFang SC;
        .empty {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: px2rem(202);
            height: px2rem(120);
          }
          span {
            margin-top: px2rem(20);
            font-size: px2rem(14);
            font-family: PingFang SC;
            color: #999999;
            font-weight: 500;
          }
        }
        .bottom {
            // position: absolute;
            width: 100%;
            height: px2rem(54);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            .all {
                width: px2rem(86);
                height: px2rem(54);
                margin-left: px2rem(34.5);
                display: flex;
                align-items: center;
                justify-content: space-between;
                .chooseIcon_warp{
                    display: flex;
                    align-items: center;
                    width: px2rem(44);
                    height: px2rem(54);
                    .icon{
                    height: px2rem(44);
                    }
                }
                span {
                  display: block;
                  line-height: px2rem(20);
                  width:px2rem(42);
                  height:px2rem(20);
                  font-size:px2rem(14);
                  font-family:PingFang SC;
                  color:rgba(38,38,38,1);
                  font-weight:500;
                }
            }
            .button {
                width: px2rem(90);
                height:px2rem(38);
                margin-right: px2rem(12);
                border-radius: px2rem(22);
                font-size:px2rem(14);
                font-family:PingFang SC;
                font-weight:500;
                line-height:px2rem(38);
                text-align: center;
                color:rgba(255,255,255,1);
                background: -webkit-linear-gradient(to right,#59C2FF,#02A4ED); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(to right,#59C2FF,#02A4ED); /* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(to right,#59C2FF,#02A4ED); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right,#59C2FF,#02A4ED); /* 标准的语法 */
            }
        }
    }
    .chooseDelete {
      height: calc(100% - #{px2rem(54)});
    }
    .UncheckList-main {
        height: 100%;
        width: 100%;
        z-index: 2;
        overflow: auto;
        .laItem {
            margin: px2rem(10) auto px2rem(10) !important;
        }
        .prove-main {
            width: 85%;
            height: px2rem(80);
            margin: px2rem(10) auto 0;
            background-color: #fff;
            border-radius: px2rem(6);
            position: relative;
            .left_purple_unchecked{
                background-color: $ui-color-assist-purple;
            }
            .left_yellow_unchecked{
                background-color: $ui-color-decorate-yellow;
            }
            .left_pink_unchecked{
                background-color: $card-color-pink;
            }
            .left{
                float: left;
                width: px2rem(6);
                height: px2rem(80);
                border-radius: px2rem(6) 0 0 px2rem(6);
            }
            .right{
            //width: call(100%- #{px2rem(325)});
            background-color: #FFF;
            position: absolute;
            top: 0;
            left: px2rem(6);
            right: 0;
            width: 100%;
            height: px2rem(80);
            /*border: px2rem(2) solid black;*/
            border-radius: 0 px2rem(6) px2rem(6) 0;
            .chooseIcon_warp{
                float: left;
                width: px2rem(44);
                height: px2rem(80);
                .icon{
                height: px2rem(44);
                }
            }
            .unchooseIcon_warp{
                width: px2rem(20);
                /*border: px2rem(2) solid black;*/
                .icon{
                display: none;
                }
            }
            .text_warp{
                /*border: px2rem(2) solid black;*/
                width: 80%;
                float: left;
                .content{
                width: 100%;
                height: px2rem(44);
                line-height: px2rem(44);
                /*border: px2rem(1) solid red;*/
                .text{
                    float: left;
                    /*border: px2rem(1) solid black;*/
                    max-width: 90%;
                    height: px2rem(44);
                    font-size: $text-size-imp;
                    font-weight: 800;
                    color: #333333;
                    //超出的部分用省略号代替
                    text-overflow: ellipsis;
                    //不换行
                    white-space: nowrap;
                    overflow: hidden;
                }
                .icon{
                    float: left;
                    width: px2rem(22);
                    height: px2rem(22);
                    margin-top: px2rem(10);
                }
                }
                .tip{

                float: none;
                /*max-width: 100%;*/
                max-width: 90%;
                height: px2rem(30);
                line-height: px2rem(15);
                font-size: $text-size-normal;
                color: #999999;
                /*border: px2rem(1) solid red;*/
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                }
            }
            .text_warp_ChooseSubmit{
                width: 90%;
            }
            }
        }
    }
</style>
